<template>
    <div>
        <div>
            <el-button class="el-button--danger" @click="openInsertDialog">申请假期</el-button>
            <el-dialog title="新的请假条" :visible.sync="insertDialogVisible">
                <el-form ref="newSellerFrom" :model="insertLeave" :rules="rules">
                    <el-form-item label="请假原因" prop="insertLeave.reason">
                        <el-input v-model="insertLeave.reason"></el-input>
                    </el-form-item>
                    <el-form-item label="请假类型" prop="insertLeave.leaveType">
                        <el-radio-group v-model="insertLeave.leaveType">
                            <el-radio v-for="(e,i) in leaveTypes" :key="i" :label="e.value">{{e.text}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="开始日期">
                        <el-date-picker v-model="insertLeave.startTime"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束日期">
                        <el-date-picker v-model="insertLeave.endTime"></el-date-picker>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <!--                    <el-button type="primary" @click="reset">重 置</el-button>-->
                    <el-button type="primary" @click="insertOne">暂存</el-button>
                    <el-button type="warning" @click="insertDialogVisible = false">取 消</el-button>
                </div>
            </el-dialog>
        </div>
        <div>
            <el-form label-width="200"
                     ref="searchForm" :model="searchForm">
                <el-row>
                    <el-col span="6">
                        <el-form-item prop="queryCondition.similarName">
                            <el-input v-model.trim="searchForm.queryCondition.auditorSimilar">
                                <template slot="prepend"><span>审核人名称</span></template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item prop="queryCondition.code">
                            <el-input v-model="searchForm.queryCondition.leaveId">
                                <template slot="prepend"><span>请假单流水号</span></template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="从">
                            <el-date-picker v-model="searchForm.queryCondition.applyTimeStart">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col span="6">
                        <el-form-item label="至">
                            <el-date-picker v-model="searchForm.queryCondition.applyTimeEnd">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col span="12">
                        <el-form-item prop="searchForm.queryCondition.leaveTypes" label="请假类型">
                            <el-checkbox-group v-model="searchForm.queryCondition.leaveTypes">
                                <el-checkbox v-for="(e,i) in leaveTypes"
                                             :key="i" :label="e.value" border="">{{e.text}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <el-col span="12">
                        <el-form-item prop="searchForm.queryCondition.applyStates" label="请假类型">
                            <el-checkbox-group v-model="searchForm.queryCondition.applyStates">
                                <el-checkbox v-for="(e,i) in applyStates"
                                             :key="i" :label="e.value" border="">{{e.text}}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item>
                    <el-button type="primary" icon="el-icon-edit"
                               @click="queryByConditionButton">查询
                    </el-button>
                    <el-button type="warning" icon="el-icon-remove"
                               @click="()=>$refs['searchForm'].resetFields()">重置
                    </el-button>
                </el-form-item>
            </el-form>

            <el-table :data="results" :stripe="true">

                <el-table-column prop="leaveId" label="号" width="50"></el-table-column>
                <el-table-column prop="startTime" label="起始时间" width="165"></el-table-column>
                <el-table-column prop="endTime" label="终止时间" width="165"></el-table-column>
                <el-table-column label="请假类型">
                    <span slot-scope="props">
                        {{leaveTypes.filter(x => (x.value === props.row.leaveType))[0].text}}
                    </span>
                </el-table-column>

                <el-table-column label="申请状态">
                    <span slot-scope="props">
                        {{applyStates.filter(x=>x.value===props.row.applyState)[0].text}}
                    </span>
                </el-table-column>
                <el-table-column label="审核状态">
                    <span slot-scope="props">
                        {{auditStates.filter(x=>x.value===props.row.auditState)[0].text}}
                    </span>
                </el-table-column>
                <el-table-column label="申请时间" width="165">
                    <span slot-scope="props">
                        {{props.row.applyTime}}
                    </span>
                </el-table-column>


                <!-- <el-table-column prop="male" label="性别" :formatter="(row,col,cell)$">
                </el-table-column> -->
                <el-table-column label="操作" width="200" fixed="left">
                    <template slot-scope="props">
                        <el-button-group>
                            <el-button class="el-button--mini" type="primary" icon="el-icon-edit"
                                       @click="open(props.row.leaveId)">编辑
                            </el-button>
                            <el-button class="el-button--mini" type="warning" icon="el-icon-delete"
                                       @click="submit(props.row.leaveId)">提交

                            </el-button>
                            <el-button class="el-button--mini" type="info" icon="el-icon-remove"
                                       @click="confirm(props.row.leaveId)">确认

                            </el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </el-table>
            <div class="el-pagination">
                <el-pagination layout="total, prev, pager, next, jumper"
                               :total="total" :current-page="searchForm.pageNum"
                               :page-size="searchForm.pageSize"
                               @current-change="queryByCondition">
                </el-pagination>
            </div>
            <el-dialog title="修改请假条" :visible.sync="modifyDialogVisible">
                <el-form ref="newSellerFrom" :model="modifyLeave" :rules="rules">
                    <el-form-item>
                        <span>申请人： {{modifyLeave.applier}}</span>
                    </el-form-item>
                    <el-form-item label="请假原因" prop="modifyLeave.reason">
                        <el-input v-model="modifyLeave.reason"></el-input>
                    </el-form-item>
                    <el-form-item label="请假类型" prop="modifyLeave.leaveType">
                        <el-radio-group v-model="modifyLeave.leaveType">
                            <el-radio v-for="(e,i) in leaveTypes" :key="i" :label="e.value">{{e.text}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="开始日期">
                        <el-date-picker v-model="modifyLeave.startTime"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束日期">
                        <el-date-picker v-model="modifyLeave.endTime"></el-date-picker>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <!--                    <el-button type="primary" @click="reset">重 置</el-button>-->
                    <el-button type="primary" @click="modify">暂存</el-button>
                    <el-button type="warning" @click="modifyDialogVisible = false">取 消</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    // import New from './components/New.vue';
    import {mapState} from 'vuex'

    export default {

        name: "LeaveApply",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
        },
        data() {
            return {
                sampleD: 'value',


                results: [
                    {
                        leaveId: 99,
                        endTime: "2021-06-08T11:52:06",
                        startTime: "2021-06-08T11:52:06",
                        leaveType: "annualLeave",
                        applyState: "saved",
                        auditState: "notAudit",
                        applyTime: "2021-06-08T11:52:06",
                    }
                ],
                total: 0,
                insertLeave: {
                    leaveType: "annualLeave",
                    startTime: "2021-06-09T11:52:06",
                    endTime: "2021-06-10T11:52:06",
                    reason: "看球赛",

                    applyState: "saved",
                    applyTime: "2021-06-08T11:52:06",
                    auditState: "notAudit",
                    leaveId: 0,
                    applier: "libai06",
                    auditorWord: "",
                    auditor: ""
                },
                modifyLeave: {
                    leaveType: "annualLeave",
                    endTime: "2021-06-08T11:52:06",
                    startTime: "2021-06-08T11:52:06",
                    reason: "string",
                    applyState: "saved",
                    applyTime: "2021-06-08T11:52:06",
                    auditState: "notAudit",

                    applier: "libai06",
                    auditorWord: "",
                    auditor: "",
                    leaveId: 0
                },
                searchForm: {
                    pageNum: 1,
                    pageSize: 6,
                    queryCondition: {
                        auditorSimilar: "",
                        leaveId: 0,
                        applyTimeStart: "2021-06-08T11:52:06",
                        applyTimeEnd: "",
                        leaveTypes: [],
                        applyStates: [
                            "saved"
                        ]
                    },

                },
                insertDialogVisible: false,
                modifyDialogVisible: false,

            }

        },
        computed: {
            ...mapState(['leaveTypes', 'applyStates', 'auditStates'])
            // sampleC() {
            //     return this.sampleD+'--';
            // }
        },
        created() {
        },
        mounted() {
            this.queryByCondition();
        },
        methods: {
            sampleM() {

            },
            openInsertDialog() {

                this.insertDialogVisible = true;
                // console.log("open dialog")
            },
            insertOne() {
                this.$http({
                    method: 'post',
                    url: '/leaveAbout/leave',
                    data: this.insertLeave,
                }).then(res => {

                    //this.total = res.data.total;
                    this.$message.warning(JSON.stringify(res.data))
                    if (res.data) {
                        this.insertDialogVisible = false;
                        this.queryByCondition();
                    }
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });
            },
            queryByCondition(pageNum) {
                if (pageNum) this.searchForm.pageNum = pageNum;
                this.$http({
                    method: 'post',
                    url: '/leaveAbout/leave/query/apply',
                    data: this.searchForm,
                }).then(res => {
                    this.total = res.data.total;
                    this.results = res.data.results;
                    this.$message.warning(JSON.stringify(res.data.total))
                    //this.total = res.data.total;
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });
            },
            queryByConditionButton() {
                this.searchForm.pageNum = 1;
                this.queryByCondition();
            },
            submit(id) {
                this.$notify({
                    title: '系统提示：',
                    message: JSON.stringify("将要提交请假申请：id = " + id)
                });
                this.$http({
                    method: 'put',
                    url: `/leaveAbout/leave/submit/${id}`,
                }).then(res => {
                    //this.total = res.data.total;
                    this.$message.warning(JSON.stringify(res.data))
                    if (res.data) {
                        this.queryByCondition();
                    }
                }).catch(res => {
                    //this.newsResults = res.data.results;
                    this.$message.warning(JSON.stringify(res.data))
                });
            },
            open(id) {
                this.$http({
                    method: 'get',
                    url: '/leaveAbout/leave/apply/' + id,

                }).then(res => {
                    this.modifyLeave = res.data;
                    // this.$nextTick()
                    this.modifyDialogVisible = true;

                    //this.total = res.data.total;
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });
            },
            modify() {
                this.$http({
                    method: 'put',
                    url: '/leaveAbout/leave/modify',
                    data: this.modifyLeave,
                }).then(res => {

                    //this.total = res.data.total;
                    this.$message.warning(JSON.stringify(res.data))
                    if (res.data) {
                        this.modifyDialogVisible = false;
                        this.queryByCondition();
                    }
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });
            },
            confirm(id) {
                this.$http({
                    method: 'put',
                    url: '/leaveAbout/leave/confirm/' + id,
                }).then(res => {

                    //this.total = res.data.total;
                    this.$message.warning(JSON.stringify(res.data))
                    //this.newsResults = res.data.results;
                }).catch(res => {
                    this.$message.warning(JSON.stringify(res.data))
                });
            }

        },
        watch: {
            // sampleC(newValue, oldValue) {
            //
            // }
        },
    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/

</style>